<template>
	<div class="index">
		<el-row>
			<el-col class="index-head" :span="24">
				<div class="index-head-left">用户信息维护</div>
				<div class="student-select">
					<el-form :model="search" label-width="80px">
						<el-form-item class="select-ipt" label="登录名">
							<el-input v-model="search.loginName"></el-input>
						</el-form-item>
						<el-form-item class="select-ipt" label="用户名称">
							<el-input v-model="search.userName"></el-input>
						</el-form-item>
					</el-form>
					<el-button type="danger" round class="add-btn" @click="handleAdd">新增</el-button>
					<el-button type="danger" round class="select-btn" @click="loadData">查询</el-button>
				</div>
			</el-col>
			<el-col :span="24">
				<el-table class="table" height="576px" :data="tableData" style="width: 100%;text-align: center">
					<el-table-column prop="loginName" label="登录名">
					</el-table-column>
					<el-table-column prop="userName" label="用户名称">
					</el-table-column>
					<el-table-column prop="registerTime" label="注册时间" min-width="100">
					</el-table-column>
					<el-table-column prop="lastLoginTime" label="最后登录时间" min-width="100">
					</el-table-column>
					<el-table-column prop="lastLoginIp" label="最后登录IP地址">
					</el-table-column>
					<el-table-column prop="loginCount" label="登录次数">
					</el-table-column>
					<el-table-column prop="isOnline" label="在线">
						<template slot-scope="scope">
							{{$dicCache.getNameByMarkAndVal('SFDM', scope.row.isOnline)}}
						</template>
					</el-table-column>
					<el-table-column label="锁定">
						<template slot-scope="scope">
							<el-switch v-model="scope.row.isLock" inactive-value="0" active-value="1" active-color="#ff3528" inactive-color="#cecece" @change="lockUser(scope.row, $event)">
							</el-switch>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="180">
						<template slot-scope="scope">
							<el-button class="option-btn" size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
							<el-button class="option-btn" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="24" class="my-pagination">
				<el-pagination background layout="total, prev, pager, next" :total="total" :page-size="pageSize" :current-page="currentPage" @current-change="handleCurrentChange">
				</el-pagination>
			</el-col>
		</el-row>
		<!-- 新增修改部分-->
		<layerEdit v-model="layerEdit.isShow" :title="layerEdit.title" @onSubmit="onSubmit">
			<el-form :rules="rules" ref="form" :model="form" label-width="120px">
				<el-form-item label="登陆名：" prop="loginName">
					<el-input v-model="form.loginName" autofocus=""></el-input>
				</el-form-item>
				<el-form-item label="密码：" :prop="!form.userBh?'password':'password2'">
					<el-input v-model="form.password" type="password"></el-input>
				</el-form-item>
				<el-form-item label="用户名称：" prop="userName">
					<el-input v-model="form.userName"></el-input>
				</el-form-item>
				<el-form-item label="角色：" prop="roles">
					<el-select v-model="form.roles" multiple placeholder="请选择角色" style="width: 100%">
						<el-option v-for="item in rolesOptions" :key="item.roleBh" :label="item.roleName" :value="item.roleBh" :disabled="item.isEnable == '0'? true:false"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="备注：" prop="note" style="margin-bottom: 0">
					<el-input type="textarea" v-model="form.note"></el-input>
				</el-form-item>
			</el-form>
		</layerEdit>
	</div>
</template>

<script>
	import layerEdit from "@/components/layer-edit";

	export default {
		name: "userInformation",
		components: {
			layerEdit
		},
		mounted() {
			this.loadData();
			this.$http.post('sys/role', {
				currentPage: 1,
				pageSize: 1000,
				_method: 'PATCH'
			}, (d) => {
				if(d.status == '1') {
					this.rolesOptions = d.rows;
				}
			});
		},
		data() {
			return {
				rolesOptions: [],
				search: {
					loginName: "",
					userName: ""
				},
				total: 1, //分页数据总条数
				currentPage: 1,
				pageSize: 10,
				tableData: [],
				layerEdit: {
					title: "",
					isShow: false
				},
				form: {
					loginName:"",
			        password: "",
			        userName: "",
			        groups: "3",
			        roles: [],
			        note: ""
				},
				rules: {
					loginName: [
			          { required: true, message: "请输入登录名", trigger: "blur" },
			          { min: 5, max:20, message: "长度在 5 到 20 个字符", trigger: "blur" }
			        ],
			        password: [
			          { required: true, message: "请输入密码", trigger: "blur" },
			          { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
			        ],
			        password2: [
			          { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
			        ],
			        userName: [
			          { required: true, message: "请输入用户名称", trigger: "blur" },
			          { max: 50, message: "最大长度 50 个字符", trigger: "blur" }
			        ],
			        roles: [{ required: true, message: "请选择角色", trigger: "change" }]
				}
			};
		},
		methods: {
			// 加载数据
			loadData() {
				this.$http.post('sys/user', {
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					loginName: this.search.loginName,
					userName: this.search.userName,
					_method: 'PATCH'
				}, (d) => {
					if(d.status == '1') {
						this.tableData = d.rows;
						this.total = d.total;
					} else {
						this.tableData = [];
						this.total = 0
					}
				});
			},
			// 切页
			handleCurrentChange(val) {
				this.currentPage = val;
				this.loadData();
			},
			// 锁定
			lockUser(row, val) {
				this.$http.post('sys/user', {
					userBh: row.userBh,
					isLock: val,
					_method: 'PUT'
				}, function(d) {
					if(d.status == '1') {
						layer.msg(d.msg);
					} else {
						layer.msg(d.msg, {
							shift: 6
						});
					}
				});
			},
			handleAdd() {
				this.form = this.$options.data().form;
				this.$refs.form.resetFields();
				this.layerEdit.title = "新增";
				this.layerEdit.isShow = true;
			},
			// 修改操作
			handleEdit(index, row) {
				this.$refs.form.resetFields();
				$.extend(this.form, row);
				this.form.roles = row.roleList.map((e)=>{
					return e.roleBh;
				});
				this.layerEdit.title = "修改";
				this.layerEdit.isShow = true;
			},
			handleDelete(index, row) {
				let that = this;
				layer.confirm('确认删除？', {
					icon: 3,
					title: '提示'
				}, function(index) {
					that.$http.post('sys/user/' + row.userBh, {
						_method: 'DELETE'
					}, (d) => {
						if(d.status == '1') {
							layer.close(index);
							that.loadData();
							layer.msg(d.msg);
						} else {
							layer.msg(d.msg, {
								shift: 6
							});
						}
					});
				});
			},
			onSubmit() {
				this.$refs.form.validate(valid => {
					if (valid) {
						if (this.form.userBh) {
							this.form._method = "PUT";
				            this.$http.post("sys/user", this.form, d => {
				              if (d.status == "1") {
				                layer.msg(d.msg);
				                this.loadData();
				                this.layerEdit.isShow = false;
				              } else {
				                layer.msg(d.msg, {
				                  shift: 6
				                });
				              }
				            });
						} else {
							this.$http.post("sys/user", this.form, d => {
				              if (d.status == "1") {
				                layer.msg(d.msg);
				                this.loadData();
				                this.layerEdit.isShow = false;
				              } else {
				                layer.msg(d.msg, {
				                  shift: 6
				                });
				              }
				            });
						}
					} else {
						return false;
					}
				});
			}
		}
	}
</script>

<style scoped>
	.el-table .cell,
	.el-table th div {
		overflow: auto !important;
	}
	
	.el-switch {
		top: 0;
		left: 0;
	}
	
	.option-btn {
		background: #f9f9f9 !important;
	}
	
	.table {
		border: 1px solid #e1e1e1;
		border-bottom: 0;
		margin-top: 15px;
	}
	
	.select-ipt {
		width: 25%;
		float: left;
		margin-right: 5%;
		margin-bottom: 0 !important;
	}
	
	.student-select {
		padding: 30px 3%;
	}
	
	.select-btn {
		height: 40px;
		padding: 0 33px;
		margin-right: 20px;
		float: right;
		background: url("../../static/img/hui-btnBG.png");
		background-size: 100% 100%;
		border: 0;
		color: #000;
	}
	
	.add-btn {
		height: 40px;
		padding: 0 33px;
		float: right;
		background: url("../../static/img/nav-bg.png");
		background-size: 100% 100%;
		border: 0;
	}
</style>